<template>
  <div>
    <div class="table">
      <el-form class="capacity_form" :model="date" :rules="rules" ref="date">
        <el-form-item prop="manageNum" label="管理层用户数量:" label-width="150px">
          <el-input type="number" v-model="date.manageNum" min="0" placeholder="请输入管理层用户数量" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"></el-input>
        </el-form-item>
        <el-form-item prop="workerNum" label="工人用户数量:" label-width="150px">
          <el-input type="number" v-model="date.workerNum" min="0" placeholder="请输入工人用户数量" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="search-panel" style="text-align:center;margin-top:15px;margin-bottom:30px">
      <el-button
          @click="saveOrUpdate"
          type="primary"
        >
          <!-- <i class="el-icon-check" />   -->
          提交
        </el-button>
    </div>
    <!-- <el-row class="page">
      <div class="page-tag">
        共{{ Math.ceil(totalData / pageSize) }}页/{{
          totalData
        }}条数据
      </div>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="sizes,prev, pager, next, jumper"
        :total="totalData"
      >
      </el-pagination>
    </el-row> -->
  </div>
</template>

<script>
import roleApi from '@/api/acl/role'
export default {
  data() {
    return {
      // selectedList: [],
      currentPage: 1,
      pageSize: 0,
      totalData: 0,
      options: [10, 20, 30, 40],
      rules: {
        manageNum: [{ required: true, trigger: 'blur', message: '管理层用户数量必须输入' }],
        workerNum: [{ required: true, trigger: 'blur', message: '工人用户数量必须输入' }]
      },
      date:{
        manageNum: 50,
        workerNum: 500,
        roleId:''
      }
    };
  },
  created() {
    this.date.roleId = this.$route.query.id
    this.fetchData(this.date.roleId)
  },
  methods: {
    handleSelectionChange(res) {
      this.selectedList = res;
    },
    handleSizeChange(){},
    handleCurrentChange() {
      this.getCPageData({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      });
    },
    toDetails(){
        // this.$router.push({path:'authorization/details'})
    },
    saveOrUpdate() {
        if(this.date.id != null) {
            this.update()
        } else {
            this.confirm()
        }
    },
    confirm() {
      roleApi.saveRoleCapacity(this.date).then(res => {
        if(res.success) {
          this.$message({
            message: '容量授权成功',
            type: 'success'
          })
          // console.log("==============");
          this.$router.push({ path: '/tenroles/list' })
        }
      })
    },
    update() {
      roleApi.updateRoleCapacity(this.date).then(res => {
        if(res.success) {
          this.$message({
            message: '容量授权成功',
            type: 'success'
          })
          // console.log("==============");
          this.$router.push({ path: '/tenroles/list' })
        }
      })
    },
    // 加载项目数据
    fetchData(roleId) {
      roleApi.selectRoleCapacity(roleId).then(res => {
          if(res.data.roleCapacity != null) {
            this.date = res.data.roleCapacity
          } 
      })
    }
  },
};
</script>
<style lang="scss" scoped>
.table {
  margin-top: 10px;
}
.capacity_form{
  margin-top: 4%;
  margin-bottom: 4%;
  width: 40%;
  margin-left: 25%;
}
.list-block {
  width: 100%;
  height: 50px;
  text-align: right;
  margin-top: -1px;
  background-color: #ffffff;
  padding-top: 10px;
//   border: solid 2px #e4e4e4;
  padding-right: 10px;
  justify-content: flex-end;
  .page-tag {
    font-size: 13px;
    line-height: 30px;
  }
}
</style>
